<template>
  <div class="bookImage">
    <div class="i" :style="imgStyle"></div>
    <div :style="sideStyle" class="c">
        <div style="border-left:1px solid break; height:150px; width:0px" ></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgStyle: {
        "background-image": `url(${this.imgPath})`,
        "height": `${this.bookHeight}'px'`,
        "width": `${this.imgWidth}'px'`,
      },
      sideStyle: {
        "height": `${this.bookHeight}'px'`,
        "width": `${this.sideWidth}'px'`,
      },
    };
  },
  props: {
    imgPath: {
      type: String,
      required: true,
    },
    bookHeight: {
      type: Number,
      required: false,
      default: 150,
    },
    imgWidth: {
      type: Number,
      required: false,
      default: 150,
    },
    sideWidth: {
      type: Number,
      required: false,
      default: 20,
    },
  },
  //计算属性
  computed: {
    // imgStyle:{
    //     get(){
    //         return `background-image: url('${this.imgPath}')`
    //     }
    // }
  },
};
</script>

<style>
.bookImage {
  /* 相对定位 */
  position: relative;
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: nowrap;
  /* 主轴上的对齐方式。向主轴开始方向对齐 */
  justify-content: flex-start;
  /* 交叉轴居中对齐 */
  align-items: center;
  /* 透视，规定视距,近大远小,必须写在父容器中 */
  perspective: 1400px;
  /* 子元素保持3D效果，必须写在父容器中 */
  transform-style: preserve-3d;
}
.i {
  height: 150px;
  width: 150px;
  /* 不平铺 */
  background-repeat: no-repeat;
  /* 拉伸图片 */
  background-size: cover;
  /* y轴旋转 */
  transform: rotateY(-30deg) translate3d(0px, 0px, 0px);
}
.c {
  /* 绝对定位 */
  position: absolute;
  /* 150/2-20/2 */
  left: 65px;
  height: 150px;
  width: 20px;
  /* 旋转90-30，平移Z10,y0,x75 */
  transform: rotateY(60deg) translate3d(10px, 0px, 75px);
  background-color: rgb(153, 148, 148);
}
</style>